<template>
  <div>
    <ListNav></ListNav>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <header>
            <h2>{{ blog.Title }}</h2>
            <span>{{ blog.UpdateTime }}</span>
          </header>
          <!-- <div v-html="blog.Content"></div> -->
          <mavon-editor
            class="md"
            :value="blog.Content"
            :subfield="prop.subfield"
            :defaultOpen="prop.defaultOpen"
            :toolbarsFlag="prop.toolbarsFlag"
            :editable="prop.editable"
            :scrollStyle="prop.scrollStyle"
            :ishljs="true"
          ></mavon-editor>
        </div>
      </div>
      <CommentSection :comments="comments" @send="SendComment"></CommentSection>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import ListNav from "../components/List_Nav";
import CommentSection from "../components/Comments/CommentSection";
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

export default {
  name: "Detail",
  components: {
    ListNav,
    CommentSection,
    mavonEditor,
  },
  data() {
    return {
      blog: null,
      comments: null,
      comment: {
        Content: "",
        Visibility: true,
        ArticleID: "",
      },
    };
  },
  created() {
    //获取文章内容
    axios
      .get("/api/Blog/" + this.$route.query.id)
      .then((res) => (this.blog = res.data))
      .catch((err) => window.console.log(err));

    //获取当前文章评论
    axios
      .get("/api/Blog/" + this.$route.query.id + "/comments")
      .then((res) => (this.comments = res.data))
      .catch((err) => window.console.log(err));
  },
  methods: {
    //发送评论
    SendComment(content) {
      this.comment.Content = content;
      this.comment.ArticleID = this.blog.BlogId;
      window.console.log(this.comment);
      axios
        .post("api/blog/" + this.blog.BlogId + "/comments", this.comment)
        .then((res) => {
          this.comments.unshift(res.data);
          // window.console.log(res.data);
        })
        .catch((err) => window.console.log(err));
    },
  },
  computed: {
    prop() {
      let data = {
        subfield: false, // 单双栏模式
        defaultOpen: "preview", //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false,
        toolbarsFlag: false,
        scrollStyle: true,
      };
      return data;
    },
  },
};
</script>

<style scoped>
.container {
  margin-top: 25px;
}
header {
  margin-bottom: 20px;
}
span {
  margin: 0;
  padding: 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 80%;
  width: 100%;
}
p {
  margin: 0 0 10px;
}
</style>
